<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>必剪</title>
</head>

<body>
    <!--
    来源：https://bcut.bilibili.cn/
-->
    <link href="style.css" rel="stylesheet">
    <div class="home-wrapper">
        <div class="block-4">
            <div class="title">丰富素材 海量音乐</div>
            <div class="subtitle">账号互通，投稿快人一步</div>
            <div class="music-wrapper">
                <div style="display: flex; flex: 1 1 0%; justify-content: center;">
                    <div class="music" style="--music-bg: #9667FF;">
                        <svg aria-hidden="true" class="c-icon"
                            style="width: 46px; height: 46px; background: white; border-radius: 23px; position: relative; z-index: 2;">
                            <use href="#bcut-music"></use>
                        </svg>
                        <div style="margin-left: 13px; position: relative; z-index: 2;">
                            <div style="font-weight: 400; font-size: 24px; line-height: 34px; margin-bottom: 11px;">
                                宝藏音乐库
                            </div>
                            <div style="font-size: 16px; line-height: 22px; opacity: 0.7; margin-bottom: 22px;">
                                轻松获得热门BGM
                            </div>
                            <div style="font-size: 16px; line-height: 22px;">声而有趣</div>
                        </div>
                    </div>
                    <div class="music" style="--music-bg: #6A67FF;">
                        <svg aria-hidden="true" class="c-icon"
                            style="width: 46px; height: 46px; background: white; border-radius: 23px; position: relative; z-index: 2;">
                            <use href="#bcut-sticker"></use>
                        </svg>
                        <div style="margin-left: 13px; position: relative; z-index: 2;">
                            <div style="font-weight: 400; font-size: 24px; line-height: 34px; margin-bottom: 11px;">海量贴纸
                            </div>
                            <div style="font-size: 16px; line-height: 22px; opacity: 0.7; margin-bottom: 22px;">花样文字模板
                            </div>
                            <div style="font-size: 16px; line-height: 22px;">给视频加点料</div>
                        </div>
                    </div>
                    <div class="music" style="--music-bg: #FF6695;">
                        <svg aria-hidden="true" class="c-icon"
                            style="width: 46px; height: 46px; background: white; border-radius: 23px; position: relative; z-index: 2;">
                            <use href="#bcut-transition"></use>
                        </svg>
                        <div style="margin-left: 13px; position: relative; z-index: 2;">
                            <div style="font-weight: 400; font-size: 24px; line-height: 34px; margin-bottom: 11px;">专业转场
                            </div>
                            <div style="font-size: 16px; line-height: 22px; opacity: 0.7; margin-bottom: 22px;">神仙特效
                            </div>
                            <div style="font-size: 16px; line-height: 22px;">小白一秒变大神</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">

        <symbol id="bcut-transition" viewBox="0 0 1024 1024">
            <path
                d="M0 512C0 229.220174 229.220174 0 512 0s512 229.220174 512 512-229.220174 512-512 512S0 794.779826 0 512z"
                fill="#FFFFFF"></path>
            <path
                d="M289.391304 333.913043a44.521739 44.521739 0 0 1 44.521739-44.521739h22.26087a44.521739 44.521739 0 0 1 44.521739 44.521739v356.173914a44.521739 44.521739 0 0 1-44.521739 44.521739h-22.26087a44.521739 44.521739 0 0 1-44.521739-44.521739V333.913043z"
                fill="#FF6695"></path>
            <path
                d="M478.608696 400.695652m33.391304 0l0 0q33.391304 0 33.391304 33.391305l0 155.826086q0 33.391304-33.391304 33.391305l0 0q-33.391304 0-33.391304-33.391305l0-155.826086q0-33.391304 33.391304-33.391305Z"
                fill="#FF6695"></path>
            <path
                d="M623.304348 333.913043a44.521739 44.521739 0 0 1 44.521739-44.521739h22.26087a44.521739 44.521739 0 0 1 44.521739 44.521739v356.173914a44.521739 44.521739 0 0 1-44.521739 44.521739h-22.26087a44.521739 44.521739 0 0 1-44.521739-44.521739V333.913043z"
                fill="#FF6695"></path>
        </symbol>



        <symbol id="bcut-sticker" viewBox="0 0 1024 1024">
            <path
                d="M0 512C0 229.286957 229.286957 0 512 0s512 229.286957 512 512-229.286957 512-512 512S0 794.713043 0 512z"
                fill="#FFFFFF"></path>
            <path
                d="M512 267.130435c-135.791304 0-244.869565 109.078261-244.869565 244.869565v6.678261c4.452174 131.33913 111.304348 238.191304 244.869565 238.191304h4.452174c-11.130435-22.26087-17.808696-48.973913-17.808696-77.913043 0-11.130435 0-22.26087 2.226087-33.391305-44.521739-4.452174-80.13913-44.521739-80.13913-91.269565 0-13.356522 44.521739-20.034783 91.269565-20.034782 20.034783 0 40.069565 2.226087 55.652174 4.452173 31.165217-22.26087 66.782609-37.843478 109.078261-37.843478 26.713043 0 53.426087 6.678261 77.913043 17.808696 0-2.226087 2.226087-4.452174 2.226087-6.678261 0-135.791304-109.078261-244.869565-244.869565-244.869565z m-89.043478 222.608695c-24.486957 0-44.521739-20.034783-44.521739-44.521739s20.034783-44.521739 44.521739-44.521739 44.521739 20.034783 44.521739 44.521739-20.034783 44.521739-44.521739 44.521739z m178.086956 0c-24.486957 0-44.521739-20.034783-44.521739-44.521739s20.034783-44.521739 44.521739-44.521739 44.521739 20.034783 44.521739 44.521739-20.034783 44.521739-44.521739 44.521739z"
                fill="#6A67FF"></path>
            <path
                d="M756.869565 516.452174C756.869565 518.678261 518.678261 756.869565 514.226087 756.869565c-11.130435-24.486957-17.808696-48.973913-17.808696-77.913043 0-11.130435 2.226087-22.26087 2.226087-33.391305 8.904348-44.521739 33.391304-82.365217 66.782609-109.07826 31.165217-24.486957 69.008696-37.843478 111.304348-37.843479 28.93913 0 55.652174 6.678261 80.13913 17.808696z"
                fill="#8B89FF"></path>
        </symbol>


        <symbol id="bcut-music" viewBox="0 0 1024 1024">
            <path
                d="M0 512C0 229.220174 229.220174 0 512 0s512 229.220174 512 512-229.220174 512-512 512S0 794.779826 0 512z"
                fill="#FFFFFF"></path>
            <path
                d="M675.08313 297.672348l0.111305 2.871652v277.637565c0.445217 4.051478 0.422957 8.192 0 12.332522-0.066783 3.806609-0.75687 7.457391-2.003478 10.841043-5.743304 21.459478-21.949217 42.473739-45.81287 56.253218-41.071304 23.730087-89.310609 17.051826-107.742609-14.892522-18.476522-31.944348-0.111304-77.06713 40.96-100.774956a103.357217 103.357217 0 0 1 47.816348-14.135653v-185.833739l-178.086956 43.631305v262.500174a33.391304 33.391304 0 0 1-0.133566 3.005217c0 26.846609-17.92 55.874783-48.128 73.305043-41.071304 23.707826-89.310609 17.029565-107.742608-14.914782-18.476522-31.944348-0.111304-77.06713 40.96-100.774957a103.223652 103.223652 0 0 1 48.261565-14.157913V358.711652a33.391304 33.391304 0 0 1 23.284869-31.833043l3.005218-0.779131 244.869565-58.189913a33.391304 33.391304 0 0 1 40.381217 29.762783z"
                fill="#9667FF"></path>
        </symbol>

    </svg>
</body>

</html>